<template>
  <a-form ref="formStep2Ref" :model="form.formStep2" layout="vertical" v-bind="layout">
    <a-collapse :default-active-key="activeKeys">
      <template #expandIcon="{ isActive }">
        <caret-right-outlined :rotate="isActive ? 90 : 0" />
      </template>
      <a-collapse-panel key="2" header="基本信息3">
        <a-row :gutter="16">
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoNotnull" label="必填">
              <a-input v-model:value="form.formStep2.demoNotnull" disabled />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols2">
            <a-form-item name="demoTextarea" label="多行文本">
              <a-textarea v-model:value="form.formStep2.demoTextarea" :rows="2" disabled />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoCode" label="编码">
              <a-input v-model:value="form.formStep2.demoCode" disabled />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoPhone" label="电话(正则)">
              <a-input v-model:value="form.formStep2.demoPhone" disabled />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoEmail" label="邮箱(正则)">
              <a-input v-model:value="form.formStep2.demoEmail" disabled />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="demoWebsite" label="网址(正则)">
              <a-input v-model:value="form.formStep2.demoWebsite" disabled />
            </a-form-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="基本信息4">
        <a-row :gutter="16">
          <a-col v-bind="colLayout.cols2">
            <a-form-item label="主子表嵌套示例-子表">
              <!-- 子表组件 -->
              <AvicTable
                ref="demoSubNest"
                table-key="demoSubNest"
                :height="300"
                :columns="columns"
                :row-key="(record) => record.id"
                :data-source="list"
                :loading="subLoading"
                :row-selection="{
                  type: 'radio',
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange,
                  columnWidth: 0,
                  fixed: true
                }"
                :show-table-setting="false"
                :page-parameter="queryParam.pageParameter"
                :total="totalPage"
                @change="handleTableChange"
              >
                <template #bodyCell="{ column, text, record }">
                  <template v-if="column.dataIndex === 'demoUserId'">
                    <span :title="record.demoUserIdAlias">
                      {{ record.demoUserIdAlias }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'demoDeptId'">
                    <span :title="record.demoDeptIdAlias">
                      {{ record.demoDeptIdAlias }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'demoRoleId'">
                    <span :title="record.demoRoleIdAlias">
                      {{ record.demoRoleIdAlias }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'demoGroupId'">
                    <span :title="record.demoGroupIdAlias">
                      {{ record.demoGroupIdAlias }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'demoPositionId'">
                    <span :title="record.demoPositionIdAlias">
                      {{ record.demoPositionIdAlias }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'secretLevel'">
                    <span :title="record.secretLevelName">
                      {{ record.secretLevelName }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'demoRadio'">
                    <span :title="record.demoRadioName">
                      {{ record.demoRadioName }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'demoRadioButton'">
                    <span :title="record.demoRadioButtonName">
                      {{ record.demoRadioButtonName }}
                    </span>
                  </template>

                  <template v-else-if="column.dataIndex === 'demoCheckbox'">
                    <span :title="record.demoCheckboxName">
                      {{ record.demoCheckboxName }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'demoSelect'">
                    <span :title="record.demoSelectName">
                      {{ record.demoSelectName }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'demoSelectMultiple'">
                    <span :title="record.demoSelectMultipleName">
                      {{ record.demoSelectMultipleName }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'demoNumber'">
                    <span :title="proxy.$formatZero(text, 2)">
                      {{ proxy.$formatZero(text, 2) }}
                    </span>
                  </template>
                </template>
              </AvicTable>
            </a-form-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
  </a-form>
</template>
<script lang="ts" setup>
import { useDemoMainNestForm, emits } from './ts/DemoMainNestForm'; // 引入表单ts

const props = defineProps({
  formId: {
    type: String,
    default: ''
  },
  form: {
    type: Object,
    default: null
  }
});
const emit = defineEmits(emits);
const activeKeys = ['2', '3'];
const { proxy, formStep2Ref, layout, colLayout, autoCode } = useDemoMainNestForm({
  props,
  emit
});

// 以下为子表操作逻辑
import type { DemoSubNestDto } from '@/api/avic/demo/DemoSubNestApi'; // 引入模块DTO
import { listDemoSubNestByPage } from '@/api/avic/demo/DemoSubNestApi'; // 引入模块API

const columns = [
  {
    title: '用户',
    dataIndex: 'demoUserId',
    key: 'demoUserId',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '部门',
    dataIndex: 'demoDeptId',
    key: 'demoDeptId',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '角色',
    dataIndex: 'demoRoleId',
    key: 'demoRoleId',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '群组',
    dataIndex: 'demoGroupId',
    key: 'demoGroupId',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '岗位',
    dataIndex: 'demoPositionId',
    key: 'demoPositionId',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '单选',
    dataIndex: 'demoRadio',
    key: 'demoRadio',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'center'
  },
  {
    title: '单选（按钮）',
    dataIndex: 'demoRadioButton',
    key: 'demoRadioButton',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'center'
  },
  {
    title: '复选',
    dataIndex: 'demoCheckbox',
    key: 'demoCheckbox',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '下拉',
    dataIndex: 'demoSelect',
    key: 'demoSelect',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'center'
  },
  {
    title: '下拉多选',
    dataIndex: 'demoSelectMultiple',
    key: 'demoSelectMultiple',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '密级',
    dataIndex: 'secretLevel',
    key: 'secretLevel',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'center'
  },
  {
    title: '开关',
    dataIndex: 'demoSwitch',
    key: 'demoSwitch',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '小数',
    dataIndex: 'demoNumber',
    key: 'demoNumber',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'right'
  },
  {
    title: '整数',
    dataIndex: 'demoInteger',
    key: 'demoInteger',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'right'
  },
  {
    title: '日期',
    dataIndex: 'demoDate',
    key: 'demoDate',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'center'
  },
  {
    title: '日期时间',
    dataIndex: 'demoDateTime',
    key: 'demoDateTime',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'center'
  },
  {
    title: '必填',
    dataIndex: 'demoNotnull',
    key: 'demoNotnull',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '多行文本',
    dataIndex: 'demoTextarea',
    key: 'demoTextarea',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '编码',
    dataIndex: 'demoCode',
    key: 'demoCode',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '电话(正则)',
    dataIndex: 'demoPhone',
    key: 'demoPhone',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '邮箱(正则)',
    dataIndex: 'demoEmail',
    key: 'demoEmail',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '网址(正则)',
    dataIndex: 'demoWebsite',
    key: 'demoWebsite',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '唯一值',
    dataIndex: 'demoUnique',
    key: 'demoUnique',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '弹窗',
    dataIndex: 'demoModalSelect',
    key: 'demoModalSelect',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '背景样式',
    dataIndex: 'demoBackgroundColor',
    key: 'demoBackgroundColor',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '富文本',
    dataIndex: 'demoRichtext',
    key: 'demoRichtext',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  },
  {
    title: '测试文本',
    dataIndex: 'demoText2',
    key: 'demoText2',
    ellipsis: true,
    minWidth: 120,
    resizable: true,
    align: 'left'
  }
] as any[];
const queryForm = ref<DemoSubNestDto>({});
const queryParam = reactive({
  // 请求表格数据参数
  pageParameter: {
    page: 1, // 页数
    rows: proxy.$settings.table.pageSize || 20 // 每页条数
  },
  searchParams: {},
  keyWord: ref(''), // 快速查询数据
  sidx: null, // 排序字段
  sord: null // 排序方式: desc降序 asc升序
});
const demoSubNest = ref(null);
const list = ref([]); // 表格数据集合
const initialList = ref([]); // 记录每次刷新得到的表格的数据
const selectedRowKeys = ref([]); // 选中数据主键集合
const selectedRows = ref([]); // 选中行集合
const subLoading = ref(false);
const totalPage = ref(0);

onMounted(() => {
  // 加载表格数据
  getList();
});
/** 查询数据  */
function getList() {
  selectedRowKeys.value = []; // 清空选中
  selectedRows.value = [];
  subLoading.value = true;
  queryForm.value.demoMainId = props.formId ? props.formId : '-1';
  queryParam.searchParams = queryForm.value;
  listDemoSubNestByPage(queryParam)
    .then((response) => {
      list.value = response.data.result;
      totalPage.value = response.data.pageParameter.totalCount;
      queryParam.pageParameter.page = response.data.pageParameter.page;
      subLoading.value = false;
      // 查询的初始数据,保存时做比对
      initialList.value = proxy.$lodash.cloneDeep(list.value);
    })
    .catch(() => {
      list.value = [];
      totalPage.value = 0;
      subLoading.value = false;
    });
}
/** 勾选复选框时触发 */
function onSelectChange(rowKeys, rows) {
  selectedRowKeys.value = rowKeys;
  selectedRows.value = rows;
}
/** 表头排序 */
function handleTableChange(pagination, _filters, sorter) {
  queryParam.pageParameter.page = pagination.current;
  queryParam.pageParameter.rows = pagination.pageSize;
  if (proxy.$objIsNotBlank(sorter.field)) {
    queryParam.sidx = sorter.field;
    queryParam.sord = sorter.order === 'ascend' ? 'asc' : 'desc'; // 排序方式: desc降序 asc升序
  }
  getList();
}
defineExpose({
  formStep2Ref,
  autoCode
});
</script>
